<template>
    <div class="my">
        <!-- 未注册 -->
        <div class="go-register" v-if="hasGetInfo&&!hasRegister">
            <div>
                <el-image
                    fit="contain"
                    src="/static/images/no-register.png"
                    class="img">
                    <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <div class="mt30 tips">您还未注册</div>
                <el-button type="primary" class="submit mt30" @click="$router.push('/register')">立即注册</el-button>
            </div>
        </div>

        <!-- 已注册 -->
        <div class="is-register" v-if="hasGetInfo&&hasRegister">
            <div class="info" v-if="myDetail">
                <div class="top text-center">
                    <el-avatar class="avatar" fit="cover"
                               :src="myDetail.photoPath ? '/_api' + myDetail.photoPath : ''"
                               @error="errorHandler">
                        <img src="/static/images/avatar.png"/>
                    </el-avatar>
                    <div class="name">{{myDetail.name}}</div>
                    <div class="edit" @click="$router.push('/edit-register')">编辑</div>
                </div>
                <div class="message">
                    <div>
                        性别
                        <p><span>{{myDetail.sex==0?'男': '女'}}</span></p>
                    </div>
                    <div>
                        年龄
                        <p><span>{{myDetail.age}}</span></p>
                    </div>
                    <div>
                        手机号
                        <p><span>{{myDetail.phone}}</span></p>
                    </div>
                </div>
            </div>
            <div class="cell mt10" @click="$router.push('/code')">
                <span class="name">我的通行证</span>
                <div class="right">
                    <i class="iconfont icon-code code"></i>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <div class="cell" @click="$router.push('/message-list')">
                <span class="name">通知</span>
                <div class="right">
                    <span class="badge" v-if="myDetail&&myDetail.number">{{myDetail.number}}</span>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                hasGetInfo: false,
                hasRegister: false,
                myDetail: null
            }
        },
        mounted() {
            this.$emit('footerHide')
            this.getInfo()
        },
        methods: {
            getInfo() {
                this.$http.get('/personData/getMyselfData').then(result => {
                    this.hasGetInfo = true
                    if (result.success) {
                        if (result.data && result.data.name) {
                            this.hasRegister = true
                            this.myDetail = result.data
                        }
                    }
                })
            },
            errorHandler() {
                return true
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .my {
        background-color: #fff;
        padding: .2rem .3rem;

        .go-register {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

            > div {
                padding: .3rem;
                width: 100%;
            }

            .tips {
                color: #999;
                margin-top: .5rem;
            }

            .img {
                width: 35%;
            }

            .submit {
                margin-top: .5rem;
                display: block;
                width: 100%;
                height: .88rem;
                border-radius: .5rem;
                background-color: #598CDA;
                border-color: #598CDA;
            }
        }

        .is-register {
            .info {
                background-color: #598CDA;
                color: #fff;
                position: relative;
                border-radius: .1rem;
                box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);

                .top {
                    padding: .3rem;
                    border-bottom: 1px dashed #fff;
                    display: flex;
                    align-items: center;

                    .avatar {
                        width: 1.2rem;
                        height: 1.2rem;
                        line-height: 1rem;
                        font-size: .28rem;
                        float: left;
                        margin-right: .3rem;
                    }

                    .name {
                        font-size: .32rem;
                        font-weight: bolder;
                        line-height: .56rem;
                        flex: 1;
                        text-align: left;
                    }

                    .age {
                        font-size: .24rem;
                    }

                    .edit {
                        padding: 0 .4rem;
                        box-shadow: 0 0 5px -1px rgba(0, 0, 0, .3);
                        border-radius: .2rem;
                    }
                }

                .message {
                    padding: .2rem .3rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    > div {
                        flex: 1;
                        text-align: center;
                        font-size: .24rem;

                        p {
                            color: #e8e8e8;
                            line-height: .48rem;
                            height: .48rem;
                            font-size: .28rem;
                            font-weight: bolder;
                        }
                    }
                }
            }
        }
    }

    .cell {
        padding: .2rem .05rem;
        border-bottom: 1px solid #eaeaea;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: .48rem;

        .right {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .name {
            color: #999;
        }

        .code {
            margin-right: .1rem;
            font-size: .32rem;
        }

        .badge {
            background-color: #f56c6c;
            border-radius: .2rem;
            color: #fff;
            display: inline-block;
            font-size: .2rem;
            line-height: 1;
            padding: .06rem .1rem;
            text-align: center;
            white-space: nowrap;
            margin-right: .1rem;
        }
    }
</style>
